import React, { memo, useEffect } from 'react'
import type { ReactNode } from 'react'
import { useAppSelector, useAppDispatch, shallowEqualApp } from '@/store'
import { changeMessage } from '@/store/modules/counter'
import hyRequest from '@/service'

interface IProps {
  children?: ReactNode
}

export interface bannerType {
  targetId: number
  bigImageUrl: string
  imageUrl: string
  targetType: number
  typeTitle: string
  s_ctrp: string
  url: string
}

const Recommend: React.FC<IProps> = () => {
  const dispatch = useAppDispatch()

  const { count, message } = useAppSelector(
    (state) => ({
      count: state.counter.count,
      message: state.counter.message
    }),
    shallowEqualApp
  )

  function handlerChangeMessage() {
    dispatch(changeMessage('我是更改后的信息'))
  }

  const [banners, setBanners] = React.useState<bannerType[]>([])
  useEffect(() => {
    hyRequest
      .get({
        url: '/banner',
        
      })
      .then((res) => {
        setBanners(res.banners)
        console.log(res.banners, 'banners')
      })
  }, [])

  return (
    <div>
      <div>
        {banners.map((item,index) => (
          <img src={item.imageUrl} alt="" key={index} />
        ))}
      </div>
      <div>Recommend</div>
      <span>
        当前计算数量：{count},当前消息详情：{message}
      </span>
      <br />
      <button onClick={handlerChangeMessage}>更改消息</button>
    </div>
  )
}

export default memo(Recommend)
